<template>
	<view class="body">
		<form @submit="formSubmit">
		<view class="face-wapper">
			<image src="../../static/icos/default-face.png" class="face"></image>
		</view>
		
		<view class="info-wapper">
			<label class="words-lbl">账号</label>
			<input name="username" type="text" value="" class="input" placeholder="请输入用户名" placeholder-class="graywords"/>
		</view>
	
		<view class="info-wapper" style="margin-top: 40upx;">
			<label class="words-lbl">密码</label>
			<input name="password" type="text" value="" password="true" class="input" placeholder="请输入密码" placeholder-class="graywords"/>
		</view>
		
		<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">注册/登录</button>
		</form>
	
		<!-- #ifndef H5 -->
				<view class="third-wapper">
					
					<view class="third-line">
						<view class="single-line">
							<view class="line"></view>
						</view>
						
						<view class="third-words">第三方账号登录</view>
						
						<view class="single-line">
							<view class="line"></view>
						</view>
					</view>
					
					<view class="third-icos-wapper">
						<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
						<!-- #ifdef APP-PLUS -->
							<image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
							<image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
							<image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
							<button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
							</button>
						<!-- #endif -->
					</view>
				</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			appOAuthLogin(e){
				var me = this;
				// 获取用户登陆类型
				var logintype = e.currentTarget.dataset.logintype;
				uni.login({
					provider:logintype,
					success(loginRes) {
						uni.getUserInfo({
							provider: logintype,
							success(info){
								
								var userInfo = info.userInfo;
								var face = "";
								var nickname = "";
								var openIdOrUid = "";
								if (logintype == "weixin") {	
									face = userInfo.avatarUrl;
									nickname = userInfo.nickName;
									openIdOrUid = userInfo.openId;
								} else if (logintype == "qq") {
									openIdOrUid = userInfo.openId;
									nickname = userInfo.nickname;
									face = userInfo.figureurl_qq_2;
								} else if (logintype == "sinaweibo") {
									openIdOrUid = userInfo.id;
									nickname = userInfo.nickname;
									face = userInfo.avatar_large;
								}
							
								uni.request({
									url: me.serverUrl + "/appUnionLogin/" + logintype,
									data: {
										"openIdOrUid": openIdOrUid,
										"nickname": nickname,
										"face": face
									},
									method: "POST",
									success(result) {
										if (result.data.status == 200) {
											var userInfo = result.data.data;
											// 保存用户信息到全局的缓存中
											uni.setStorageSync("globalUser", userInfo);
											// 切换页面跳转，使用tab切换的api
											uni.switchTab({
												url: "../me/me"
											});
										}
									}
								})
								
							}
						})
						
					}
				});
			},
			
			// 实现微信小程序端
			wxLogin(e) {
				var me = this;
			//通过微信 获取用户基本信息
				var userInfo = e.detail.userInfo;
				//实现微信登陆
				uni.login({
					provider: "weixin",
					success() {
				var code = loginResult.code;
					var loginToWidchMP = 1;
				uni.request({
					url: me.serverUrl + '/mpWXLogin/' + code + '&qq=lee64775104',
					data: {
							"avatarUrl": uerInfo.avatarUrl,
							"nickName": userInfo.nickName,
							'whichMP': loginToWidchMP
						},
					method: "POST",
					success(userResult) {
								var userInfo = userResult.data.data;
								uni.setStorageSync("globalUser", userInfo);
								uni.switchTab({
									url: "../me/me"
								});
					}
				});
					}
				})
			},
	formSubmit (e) {
					var me = this;
					var username = e.detail.value.username;
					var password = e.detail.value.password;
					// console.log(username);
					// console.log(password);
	
					// 发起注册/登录的请求
					var serverUrl = me.serverUrl;
					uni.request({
						url: serverUrl + '/user/registOrLogin?qq=lee64775104',
						data: {
							"username": username,
							"password": password
						},
						method: "POST",
						success: (res) => {
							
								// 获取真实数据之前，务必判断状态是否为200
							if (res.data.status == 200) {
								var userInfo = res.data.data;
								uni.setStorageSync("globalUser", userInfo);
								uni.switchTab({
									url: "../me/me"
								});
							} else if (res.data.status == 500) {
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									image: "../../static/icos/error.png"
								})
							}
						}
					});
				}			
		}
	}
</script>

<style>
@import url("registLogin.css");
</style>
